<template>
  <Dialoger v-model="isShow" :onConfirm="handleSubmit" :dialogCls="'d-paner-md'" title="编辑">
    <template v-slot:body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">类型</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.cat" class="d-form-select">
              <option v-for="item in directTypes" :key="item.key" :value="item.key">{{ item.text }}</option>
            </select>
          </div>
        </div>
        <div v-if="isDir(state.cat)" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">路径</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.path" class="d-form-input" type="text" />
          </div>
        </div>
        <div v-if="isDir(state.cat)" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">查找所有</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.isFindAll" />
          </div>
        </div>
        <div v-if="isDir(state.cat)" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">排除目录</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <input v-model="state.ignoreDir" class="d-form-input" type="text" />
          </div>
        </div>
        <div v-if="isDir(state.cat)" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">排除文件</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <input v-model="state.ignoreFile" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">排序</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.updateTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="修改时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-6"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">修改人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.updateUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.createTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="创建时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-6"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">创建人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.createUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
      </div>
    </template>
  </Dialoger>
</template>

<script>
import { mapState } from 'vuex'
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, Switcher } from '@daelui/vdog/dist/components'
import { objecter } from '@daelui/dogjs/dist/components.js'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import directSer from '../../service/action/direct.action.js'
import stock from '../../service/stock/index.js'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Switcher,
    Dialoger
  },

  data () {
    return {
      isShow: false, // 窗口是否显示
      isEdit: false, // 是否是编辑模式,
      // 编辑信息
      editInfo: {},
      // 表单数据
      state: {
        id: '',
        name: '',
        cat: '',
        href: '',
        order: 0,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 目录类型
      directTypes: stock.state.directTypes
    }
  },

  computed: mapState([
    'pageTypeEnum'
  ]),

  methods: {
    /**
     * @function 显示与隐藏
    */
    show (data) {
      this.isShow = !!data
      data = data || {}
      this.editInfo = data
      if (data.edit) {
        this.isEdit = true
        this.state = objecter.clone(data.item)
      } else {
        this.isEdit = false
        let newItem = {
          name: '',
          pid: data.item.id,
          ignoreDir: stock.state.ignoreDir,
          cat: stock.state.directTypes.DIR,
          order: 0
        }
        // 添加子级
        if (data.parent) {
          newItem.pid = data.item.id || ''
        } else if (data.prev) { // 添加同级
          newItem.prevId = data.item.id
        }
        this.state = newItem
      }
    },

    /**
     * @function 提交
    */
    handleSubmit (b) {
      let defer = null
      let data = Object.assign({}, this.state)
      // 编辑
      if (this.isEdit) {
        defer = directSer.editItem(data)
      } else { // 添加
        defer = directSer.addItem(data)
      }
      return defer.then(result => {
        let b = true
        if (result.success) {
          Dialoger.success(locale.action.success)
          this.$emit('onSubmitSuccess', data)
        } else {
          b = false
          Dialoger.danger(locale.action.fail)
        }
        return b
      })
    },

    // 是否是目录
    isDir: stock.action.isDir
  },

  // beforeMount () {
  //   let params = this.$route.params
  //   // 新建
  //   if (!params.id) {
  //     this.isEdit = false
  //   } else { // 编辑
  //     this.isEdit = true
  //     this.loadItem(params.id)
  //   }
  // },

  mounted () {

  }
}
</script>

<style lang="less" scoped>
.d-row {
  .d-form-group:last-child {
    margin-bottom: 0;
  }
}
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 320px;
}
</style>
